<template>
  <div class="vendor-evaluate-page">
    <el-card>
      <div class="header-bar">
        <span class="title">供应商评价与对比</span>
        <el-select v-model="selected" multiple filterable placeholder="选择供应商" style="width: 340px; margin-right: 12px;">
          <el-option
            v-for="v in vendorList"
            :key="v.code"
            :label="v.name"
            :value="v.code"
          />
        </el-select>
      </div>
      <el-table
        :data="compareList"
        border
        style="width:100%; margin-bottom:22px;"
        v-if="compareList.length"
      >
        <el-table-column prop="name" label="名称" min-width="130" align="center"/>
        <el-table-column prop="ontimeRate" label="到货及时率" min-width="120" align="center">
          <template #default="{ row }">
            <el-progress :percentage="row.ontimeRate" :status="row.ontimeRate>=98?'success':row.ontimeRate>=90?'normal':'exception'" :stroke-width="14" :show-text="true" />
          </template>
        </el-table-column>
        <el-table-column prop="qualifiedRate" label="合格率" min-width="120" align="center">
          <template #default="{ row }">
            <el-progress :percentage="row.qualifiedRate" :status="row.qualifiedRate>=98?'success':row.qualifiedRate>=90?'normal':'exception'" :stroke-width="14" :show-text="true" color="#13ce66"/>
          </template>
        </el-table-column>
        <el-table-column prop="coopFreq" label="合作频率" min-width="100" align="center"/>
        <el-table-column prop="score" label="评分" min-width="120" align="center">
          <template #default="{ row }">
            <el-rate v-model="row.score" disabled show-score score-template="{value} 分"/>
          </template>
        </el-table-column>
        <el-table-column prop="comment" label="评价" min-width="180" align="center">
          <template #default="{ row }">
            <span v-if="row.comment">{{ row.comment }}</span>
            <el-button size="small" type="primary" link @click="onComment(row)">评价</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-empty v-else description="请选择要对比的供应商" />

      <el-card style="margin-top:22px;" v-if="compareList.length">
        <template #header>
          <span>关键指标对比图</span>
        </template>
        <div style="width:100%;height:340px;">
          <v-chart :option="chartOption" autoresize />
        </div>
      </el-card>
    </el-card>
    <!-- 评价弹窗 -->
    <el-dialog v-model="commentDialog.visible" title="供应商评价" width="380px">
      <el-form :model="commentDialog.form" label-width="70px">
        <el-form-item label="评分">
          <el-rate v-model="commentDialog.form.score" allow-half />
        </el-form-item>
        <el-form-item label="评价">
          <el-input v-model="commentDialog.form.comment" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="commentDialog.visible = false">取消</el-button>
        <el-button type="primary" @click="onSaveComment">提交</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { use } from 'echarts/core'
import VChart from 'vue-echarts'
import { BarChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'

// 注册 ECharts 组件
use([
  BarChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, CanvasRenderer
])

// 15条供应商 mock 数据
const vendorList = [
  { code: 'V001', name: '国药控股', ontimeRate: 99, qualifiedRate: 98, coopFreq: 18, score: 4.9, comment: '服务专业，供货稳定' },
  { code: 'V002', name: '华润医药', ontimeRate: 97, qualifiedRate: 97, coopFreq: 20, score: 4.8, comment: '到货快，响应及时' },
  { code: 'V003', name: '上海医药集团', ontimeRate: 92, qualifiedRate: 95, coopFreq: 13, score: 4.7, comment: '价格合理，质量过硬' },
  { code: 'V004', name: '石药集团', ontimeRate: 93, qualifiedRate: 94, coopFreq: 10, score: 4.5, comment: '服务一般' },
  { code: 'V005', name: '扬子江药业', ontimeRate: 98, qualifiedRate: 99, coopFreq: 16, score: 4.6, comment: '合格率高，值得信赖' },
  { code: 'V006', name: '恒瑞医药', ontimeRate: 90, qualifiedRate: 93, coopFreq: 11, score: 4.4, comment: '' },
  { code: 'V007', name: '复星医药', ontimeRate: 89, qualifiedRate: 92, coopFreq: 8, score: 4.2, comment: '' },
  { code: 'V008', name: '齐鲁制药', ontimeRate: 94, qualifiedRate: 95, coopFreq: 14, score: 4.3, comment: '' },
  { code: 'V009', name: '正大天晴', ontimeRate: 91, qualifiedRate: 92, coopFreq: 12, score: 4.1, comment: '' },
  { code: 'V010', name: '丽珠医药', ontimeRate: 96, qualifiedRate: 97, coopFreq: 9, score: 4.0, comment: '' },
  { code: 'V011', name: '太极集团', ontimeRate: 92, qualifiedRate: 93, coopFreq: 7, score: 4.0, comment: '' },
  { code: 'V012', name: '天士力控股', ontimeRate: 95, qualifiedRate: 95, coopFreq: 13, score: 3.9, comment: '' },
  { code: 'V013', name: '哈药集团', ontimeRate: 88, qualifiedRate: 90, coopFreq: 6, score: 3.8, comment: '' },
  { code: 'V014', name: '东阿阿胶', ontimeRate: 94, qualifiedRate: 98, coopFreq: 7, score: 3.7, comment: '' },
  { code: 'V015', name: '白云山制药', ontimeRate: 97, qualifiedRate: 99, coopFreq: 15, score: 4.2, comment: '' }
]

const selected = ref(['V001', 'V002', 'V003']) // 默认选中部分
const compareList = computed(() => {
  return vendorList.filter(v => selected.value.includes(v.code))
})

// 评价弹窗
const commentDialog = reactive({
  visible: false,
  row: null,
  form: { score: 5, comment: '' }
})
function onComment(row) {
  commentDialog.visible = true
  commentDialog.row = row
  commentDialog.form.score = row.score
  commentDialog.form.comment = row.comment || ''
}
function onSaveComment() {
  if (commentDialog.row) {
    commentDialog.row.score = commentDialog.form.score
    commentDialog.row.comment = commentDialog.form.comment
    ElMessage.success('评价已保存')
  }
  commentDialog.visible = false
}

// 柱状图配置
const chartOption = computed(() => {
  const names = compareList.value.map(v => v.name)
  return {
    tooltip: { trigger: 'axis' },
    legend: { data: ['到货及时率', '合格率', '合作频率'] },
    grid: { left: 40, right: 30, bottom: 40, top: 60 },
    xAxis: { type: 'category', data: names },
    yAxis: [
      { type: 'value', name: '百分比', min: 0, max: 100, position: 'left', axisLabel: { formatter: '{value}%' } },
      { type: 'value', name: '合作频率', min: 0, max: 25, position: 'right' }
    ],
    series: [
      {
        name: '到货及时率',
        type: 'bar',
        data: compareList.value.map(v => v.ontimeRate),
        yAxisIndex: 0,
        barWidth: 24
      },
      {
        name: '合格率',
        type: 'bar',
        data: compareList.value.map(v => v.qualifiedRate),
        yAxisIndex: 0,
        barWidth: 24
      },
      {
        name: '合作频率',
        type: 'bar',
        data: compareList.value.map(v => v.coopFreq),
        yAxisIndex: 1,
        barWidth: 24
      }
    ]
  }
})
</script>

<style scoped>
.vendor-evaluate-page {
  padding: 28px 38px 30px 38px;
  min-height: 100vh;
  background: #fff;
}
.header-bar {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
  gap: 10px;
}
.header-bar .title {
  font-size: 1.18rem;
  font-weight: 600;
  margin-right: 20px;
}
</style>
